<template>
	<view>
		<use-navbar title="申请开票"></use-navbar>
		
		<!-- 商品区 -->
		<view class="padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="goods-area" v-for="(item, index) in order_detail" :key="index">
				<view class="dflex">
					<view class="img">
						<image :src="item.goods_sku_img || item.goods_img" class="border-radius"></image>
					</view>
					<view class="margin-left-sm">
						<text class="clamp-2">{{ item.goods_name }} {{ item.goods_name_pw }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right">× {{ item.goods_num }}</text>
							{{ item.goods_sku_name || '&nbsp;&nbsp;' }}
						</view>
						<view class="margin-top-sm">
							<text class="price">{{ item.goods_price / 100 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 发票抬头 -->
		<view class="margin-lr margin-top-sm">
			<use-list-title title="发票" type="round" :tip="invoiceName" color="#333" iconfont="iconquanbudingdan-" @goto="toInvoice"></use-list-title>
		</view>
		
		<!-- 提交操作 -->
		<view class="padding w-full margin-top-xl">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base" @click="toSubmit">提交申请</view>
			</view>
		</view>
		
		<!-- 用云版权 -->
		<use-copyright></use-copyright>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		computed: {
			...mapState(['islogin', 'member']),
		},
		data() {
			return {
				isubmit: false,
				
				// 订单ID
				order_id: '',
				// 商品数据
				order_detail: [],
				// 订单数据
				order_data: {},

				// 发票名称
				invoiceName: '本次不申请发票',
				// 发票信息
				invoiceData: {},
				// 开具发票
				invoice: false,
				
				postData: {
					order_id: '',
					invoice_id: ''
				}
			};
		},
		onUnload() {
			uni.$emit('__event_order', 'refresh');
		},
		onLoad(res) {
			this.order_id = res.order_id;
			if (!this.order_id) {
				this.$api.msg('订单编号不存在');
				return;
			}
			
			uni.$on('__event_choice_invoice', data => {
				this.invoiceData = data;
				if (data.type == 1) {
					this.invoiceName = `个人发票 · ${data.name}`;
				} else {
					this.invoiceName = `企业发票 · ${data.name}`;
				}
			});
			this.loadData();
		},
		methods: {
			loadData() {
				this.$func.usemall.call('order/detail', {
					order_id: this.order_id
				}).then(res => {
					if (res.code === 200) {
						this.order_data = res.datas.order;
						this.order_detail = res.datas.order_detail;
					}
				})
				
				this.$db['usemall-member-invoice'].where(`create_uid == "${this.member._id}"`)
					.tofirst({
						orderby: 'is_default desc'
					})
					.then(res => {
						if (res && res.code === 200) {
							this.invoiceData = res.datas;
							if (res.datas.type == 1) {
								this.invoiceName = `个人发票 · ${res.datas.name}`;
							} else {
								this.invoiceName = `企业发票 · ${res.datas.name}`;
							}
						}
					})
			},
			// 选择发票抬头
			toInvoice() {
				uni.navigateTo({
					url: '/sub-user/pages/invoice/invoice?source=1',
					complete() {}
				});
			},
			toSubmit() {
				if (!(this.invoiceData && this.invoiceData._id)) {
					this.$api.msg(`请选择发票抬头`);
					return;
				}

				if (this.isubmit) return;
				this.isubmit = true;

				uni.showModal({
					content: `申请开票`,
					success: (res) => {
						if (res.confirm) { 
							this.postData.order_id = this.order_id;
							this.postData.invoice_id = this.invoiceData._id;
							
							uni.showLoading({
								title: '申请中'
							});
							
							// 申请并提交
							this.$func.usemall.call('member/applyInvoice', this.postData)
								.then(res => {
									this.isubmit = false;
									if (res.code === 200) {
										this.$api.msg('提交成功');
										//setTimeout(() => {
										this.$api.back();
										//}, 1000);
										return;
									}
									this.$api.msg(res.msg);
								})
								.finally(() => {
									uni.hideLoading();
								});
							return;
						} 
						
						this.isubmit = false;
					}
				});

			},
			// 打开操作菜单
			openActionSheet(idx) {

				let type = '';
				let actionSheetList = [];

				switch (idx) {
					case 1:
						type = "货物状态";
						this.actionSheetTips.text = "请选择" + type;
						actionSheetList = [{
							text: "已收到货",
							color: "#333",
							type: type
						}, {
							text: "未收到货",
							color: "#333",
							type: type
						}, ];

						break;
					case 2:
						type = this.reasonTitle;
						this.actionSheetTips.text = "请选择" + type;
						
						if (this.type == '退款') {
							actionSheetList = [{
								text: "未发货不要了",
								color: "#333",
								type: type
							}, {
								text: "拍错了，重新下单",
								color: "#333",
								type: type
							}, {
								text: "换一家，重新购买",
								color: "#333",
								type: type
							}, {
								text: "其他",
								color: "#333",
								type: type
							}];
							break;
						}
						
						if (this.type == '退货') {
							actionSheetList = [{
								text: "7天无理由",
								color: "#333",
								type: type
							}, {
								text: "商品质量/故障问题",
								color: "#333",
								type: type
							}, {
								text: "商品破损/包装问题",
								color: "#333",
								type: type
							}, {
								text: "少件/发错货/未收到货",
								color: "#333",
								type: type
							}, {
								text: "实物与商品描述不相符",
								color: "#333",
								type: type
							}, {
								text: "其他",
								color: "#333",
								type: type
							}];
							break;
						}
						
						if (this.type == '换货') {
							actionSheetList = [{
								text: "商品质量/故障问题",
								color: "#333",
								type: type
							}, {
								text: "商品破损/包装问题",
								color: "#333",
								type: type
							}, {
								text: "少件/发错货/未收到货",
								color: "#333",
								type: type
							}, {
								text: "实物与商品描述不相符",
								color: "#333",
								type: type
							}, {
								text: "其他",
								color: "#333",
								type: type
							}];
							break;
						}
						break;
				}

				this.actionSheetShow = true;
				this.actionSheetList = actionSheetList;
			},
			// 关闭操作菜单
			actionSheetClose() {
				console.log(this.actionSheetShow);
			},
			// 点击操作菜单
			actionSheetClick(index) {
				let item = this.actionSheetList[index];
				
				switch (item.type) {
					case '货物状态':
						this.goods_state = item.text;
						this.postData.goods_state = item.text;
						break;
					default:
						this.reason = item.text;
						this.postData.reason = item.text;
						break;
				}
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	/* 退款区 */
	.refund-area {
		line-height: 60rpx;

		.desc {
			line-height: 60rpx;
		}
	}
</style>
